<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="./css/default.css"/>
        <h:outputStylesheet name="./css/cssLayout.css"/>
        <h:outputScript name="./js/jquery-1.10.2.min.js"/> 
        
        <h:outputStylesheet name="./vegas/jquery.vegas.min.css"/>
        <h:outputScript name="./vegas/jquery.vegas.min.js"/>
        
        <h:outputStylesheet name="./css/ccslider.css"/>
        <h:outputScript name="./js/jquery-migrate-1.1.1.min.js"/>
        <h:outputScript name="./js/jquery.ccslider-3.0.2.min.js"/>
        <title>CESAR VALLEJO</title>
        <!--[if lt IE 8]>
		<script src="../resources/js/IE9.js"></script>
	<![endif]-->
        <!--[if lt IE 9]>
        <style type="text/css">
            .slider-caption {
                background: transparent;
                -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000)"; /* IE8 */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000);   /* IE6 & 7 */
                zoom: 1;
            }
        </style>
        <script src="../resources/js/html5.js"></script>
        <![endif]-->
        <script type="text/javascript">
            $(document).ready(function(){
                $.vegas('slideshow', {
                backgrounds:[
                    { src:'../resources/img/background/f1.jpg', fade:1000 },
                    { src:'../resources/img/background/f2.jpg', fade:1000 },
                    { src:'../resources/img/background/f3.jpg', fade:1000 },
                    { src:'../resources/img/background/f4.jpg', fade:1000 },
                    { src:'../resources/img/background/f5.jpg', fade:1000 },
                    { src:'../resources/img/background/f6.jpg', fade:1000 },
                    { src:'../resources/img/background/f7.jpg', fade:1000 },
                    { src:'../resources/img/background/f8.jpg', fade:1000 },
                    { src:'../resources/img/background/f9.jpg', fade:1000 }
                ]
                })('overlay', {
                    src:'../resources/vegas/overlays/01.png',
                    opacity:0.5
                });
                        
                 $('#slider').ccslider({
                    effectType: '3d',
                    effect: 'cubeUp',
                    _3dOptions: {
                                  imageWidth: 1024,
                                  imageHeight: 105,
                                  innerSideColor: '#444',
                                  transparentImg: false,
                                  makeShadow: true,
                                  shadowColor: 'rgba(0, 0, 0, 0.7)',
                                  slices: 7,
                                  rows: 3,
                                  columns: 3,
                                  delay: 100,
                                  delayDir: 'first-last',
                                  depthOffset: 400,
                                  sliceGap: 20,
                                  easing: 'easeInOutCubic',
                                  fallBack: 'fadeSlide',
                                  fallBackSpeed: 1200
                                },
                    animSpeed: 1200,
                    startSlide: 0,
                    directionNav: false,
                    controlLinks: false,
                    controlLinkThumbs: false,
                    controlThumbLocation: '',
                    autoPlay: true,
                    pauseTime: 3000,
                    pauseOnHover: true,
                    captions: true,
                    captionPosition: 'bottom',
                    captionAnimation: 'slide',
                    captionAnimationSpeed: 600,
                    beforeSlideChange: function(index){},
                    afterSlideChange: function(index){} 
            });
        });
        </script>
    </h:head>
    <h:body>
        <div class="content">
            <div id="top">
                <ui:insert name="top">
                    <div class="cabecera">
                        <div class="banner">
                            <!--
                            <div id="slider">
                                <img src="../resources/img/banner/bn1.jpg" alt="" />
                                <img src="../resources/img/banner/bn2.jpg" alt="" />
                                <img src="../resources/img/banner/bn3.jpg" alt="" />
                                <img src="../resources/img/banner/bn4.jpg" alt="" />
                                <img src="../resources/img/banner/bn5.jpg" alt="" />
                            </div>
                            -->
                        </div>
                        <div class="menu">
                            <h:form>
                            <p:menubar>  
                                <p:submenu label="File" icon="ui-icon-document">  
                                    <p:submenu label="New" icon="ui-icon-contact">  
                                        <p:menuitem value="Project" url="#" />  
                                        <p:menuitem value="Other" url="#" />  
                                    </p:submenu>  
                                    <p:menuitem value="Open" url="#" />  
                                    <p:separator />  
                                    <p:menuitem value="Quit" url="#" />  
                                </p:submenu>  

                                <p:submenu label="Edit" icon="ui-icon-pencil">  
                                    <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w" />  
                                    <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e" />  
                                </p:submenu>  

                                <p:submenu label="Help" icon="ui-icon-help">  
                                    <p:menuitem value="Contents" url="#" />  
                                    <p:submenu label="Search" icon="ui-icon-search">  
                                        <p:submenu label="Text">  
                                            <p:menuitem value="Workspace" url="#" />  
                                        </p:submenu>  
                                        <p:menuitem value="File" url="#" />  
                                    </p:submenu>  
                                </p:submenu>  

                                <p:submenu label="Actions" icon="ui-icon-gear">  
                                    <p:submenu label="Ajax" icon="ui-icon-refresh">  
                                        <p:menuitem value="Save" icon="ui-icon-disk"/>  
                                        <p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>  
                                    </p:submenu>  
                                    <p:submenu label="Non-Ajax" icon="ui-icon-newwin">  
                                        <p:menuitem value="Delete" icon="ui-icon-close"/>  
                                    </p:submenu>  
                                </p:submenu>  

                                <p:menuitem value="Quit" url="http://www.primefaces.org" icon="ui-icon-close" />  

                                <f:facet name="options">  
                                    <p:inputText style="margin-right:10px"/>  
                                    <p:commandButton type="button" value="Logout" icon="ui-icon-extlink" />  
                                </f:facet>  
                            </p:menubar>   
                           </h:form>
                        </div>
                    </div>
                </ui:insert>
            </div>
            <div class="cuerpo">
                <div id="left">
                    <ui:insert name="left">Left</ui:insert>
                </div>
                <div id="content" class="left_content">
                    <ui:insert name="content">Content</ui:insert>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">Bottom</ui:insert>
            </div>    
        </div>   
    </h:body>

</html>
